<template>
  <a-dropdown :trigger="['click']">
    <a-space>
      <a-avatar :src="userStore.avatar" :size="28" />
      <DownOutlined style="font-size: 12px" />
    </a-space>
    <template #overlay>
      <a-menu>
        <a-menu-item>
          <a @click="goProfile">个人中心</a>
        </a-menu-item>
        <a-menu-item>
          <a @click="handleAboutUs">关于我们</a>
        </a-menu-item>
        <a-menu-item>
          <a @click="handleLogout">退出登录</a>
        </a-menu-item>
      </a-menu>
    </template>
  </a-dropdown>
</template>

<script setup lang="ts">
import { ExclamationCircleOutlined, DownOutlined } from "@ant-design/icons-vue"
import { useUserStore } from "@/store"
import { useRouter } from "vue-router"
import { createVNode } from "vue"
import { Modal } from "ant-design-vue"
import { notification } from "ant-design-vue"
const userStore = useUserStore()
const router = useRouter()
const handleLogout = () => {
  Modal.confirm({
    title: "您确定要退出登录吗？",
    icon: createVNode(ExclamationCircleOutlined),
    okText: "确定",
    cancelText: "取消",
    onOk() {
      userStore.logout()
      router.replace("/login")
    }
  })
}

const goProfile = () => {
  router.push("/profile")
}
const handleAboutUs = () => {
  notification.warning({
    message: "系统提醒",
    description: "关于我们的详细介绍，系统正在加班加点的制作中，敬请期待！"
  })
}
</script>
